<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>02_模版语法</title>
</head>
<body>
<!--
1、模版的理解：
    动态的html页面
    包含了一些js语法代码
    大括号表达式
    指令（以v-开头的自定义标签属性）
2、双括号表达式
    语法{{exp}}  或{{{exp}}}
    功能：向页面输出数据
    可以调用对象的方法
3、指令一：强制数据绑定
    功能：指定变化的属性指
    完整写法：
    v-bind:xxx='yyy'  // yyy会作为表达式的解析执行
    简洁写法：
    :xxx='yyy'
4、指令二：绑定事件监听
    功能：绑定指定事件名的回调函数
    完整写法：
    v-on:click='xxx'
    简洁写法：
    @click='xxx'
-->
<div id="app">
    <h2>1、双大括号表达式</h2>
    <p> {{msg}} </p>
    <p> {{msg.toUpperCase()}} </p>  <!--如果想要操作格式  直接调用方法就可以-->

    <h2>2、指令一：强制数据绑定</h2>
    <img src="imgurl">  <!--这个识别为textContent-->
    <img v-bind:src="imgurl"> <!--强制绑定 识别成innerHTML-->
    <img :src="imgurl"> <!--简化版本-->

    <h2>3、指令二：绑定事件监听</h2>
    <button v-on:click="test" >test1</button>
    <button @click="test" >test2</button><!--简化写法-->
    <button @click="test2(msg)" >test3</button>


</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data:{
            msg: '  I  Will Back',
            imgurl: 'https://cn.vuejs.org/images/logo.png'
        },
        methods:{
          test(){
              alert("点击了test")
          },
           test2(content){
              alert(content)
          }
        }

    })


</script>


</body>
</html>